<template>
  <div>
    <!-- breadcrumb-area start -->
    <div class="breadcrumb-area">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="row breadcrumb_box align-items-center">
              <div class="col-lg-6 col-md-6 col-sm-12 text-center text-md-left">
                <h2 class="breadcrumb-title">个人中心</h2>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-12">
                <!-- breadcrumb-list start -->
                <ul class="breadcrumb-list text-center text-md-right">
                  <li class="breadcrumb-item"><router-link to="/">首页</router-link></li>
                  <li class="breadcrumb-item active">个人中心</li>
                </ul>
                <!-- breadcrumb-list end -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- breadcrumb-area end -->

    <!-- account area start -->
    <div class="checkout-area pt-100px pb-100px">
      <div class="container">
        <el-card style="height: auto;">
          <el-row>
            <el-col :span="5"
              ><el-image
                style="width: 200px; height: 200px"
                :src="$store.state.imgURLPre+currentUser.userImages"
                :preview-src-list="[currentUser.userImages]"
              >
              </el-image>
              <el-row>
                <el-col
                  ><el-button type="primary" @click="edit"
                    >编辑</el-button
                  >
                  <el-button type="success" @click="showAddDialog"
                    >添加地址</el-button
                  >
                  </el-col
                >
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col>用户名：{{ currentUser.userUsername }}</el-col>
              </el-row>
              <el-row>
                <el-col>昵称：{{ currentUser.userNickName }}</el-col>
              </el-row>
              <el-row>
                <el-col>手机号：{{ currentUser.userPhone }}</el-col>
              </el-row>
              <el-row>
                <el-col>邮箱：{{ currentUser.userEmail }}</el-col>
              </el-row>
              <el-row>
                <el-col
                  >性别：{{ currentUser.userSex == 1 ? "男" : "女" }}</el-col
                >
              </el-row>
              <el-row>
                <el-col>出生日期：{{ currentUser.userBirthday | dataFomart}}</el-col>
              </el-row>
              <el-row>
                <el-col>身份证：{{ currentUser.userIdNumber }}</el-col>
              </el-row>
              <el-row>
                <el-col>签名：{{ currentUser.userDescribe }}</el-col>
              </el-row>
            </el-col>

            <el-col :span="5">
              <el-row>余额（元）</el-row>
              <el-row class="price">{{ currentUser.userWallets }}</el-row>
              <el-row
                ><el-button type="success" @click="dialogFormVisible2=true">充值</el-button
                ><el-button type="danger" @click="cashOut">提现</el-button></el-row
              >
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px;">
            <el-table :data="adds" border stripe style="width: 100%" id="addressid">
      <el-table-column prop="id" label="ID " width="100" sortable></el-table-column>
      <el-table-column prop="addressMessageName" label="收货人姓名"></el-table-column>
      <el-table-column prop="addressMessagePhone" label="电话"></el-table-column>
      <el-table-column prop="addressMessageProvince" label="省"></el-table-column>
      <el-table-column prop="addressMessageCity" label="市"></el-table-column>
      <el-table-column prop="addressMessageDistrict" label="区"></el-table-column>
      <el-table-column prop="addressMessageAddress" label="详细地址"></el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle  @click="editAdds(scope.row)"></el-button>
          <el-popconfirm
              @confirm="del(scope.row.id)"
              title="确定删除？"
          >
            <el-button type="danger" icon="el-icon-delete" circle slot="reference" style="margin-left: 10px"></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
          </el-row>
        </el-card>
      </div>
    </div>
    <!-- account area end -->
    <!-- 弹窗   -->
    <el-dialog
      title="信息"
      :visible.sync="dialogFormVisible"
      width="30%"
      lable-width="100px"
      :close-on-click-modal="false"
    >
      <el-form :model="currentUser" ref="addFormRef" :rules="addFormRules">
        <el-form-item label="头像" label-width="150px" prop="userImages">
          <el-upload
            :action="$store.state.uploadAction"
            :on-success="fileSuccessUpload"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名" label-width="150px" prop="userUsername">
          <el-input
            v-model="currentUser.userUsername"
            autocomplete="off"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="150px" prop="userPassword">
          <el-input
            v-model="currentUser.userPassword"
            autocomplete="off"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="150px" prop="userPhone">
          <el-input
            v-model="currentUser.userPhone"
            autocomplete="off"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="150px" prop="userEmail">
          <el-input
            v-model="currentUser.userEmail"
            autocomplete="off"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" label-width="150px">
          <el-input
            v-model="currentUser.userNickName"
            autocomplete="off"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="150px" prop="userSex">
          <el-radio v-model="currentUser.userSex" label="1">男</el-radio>
          <el-radio v-model="currentUser.userSex" label="2">女</el-radio>
          <!-- <el-input v-model="entity.userSex" autocomplete="off" style="width: 80%"></el-input> -->
        </el-form-item>
        <el-form-item label="出生日期" label-width="150px">
          <el-date-picker
            v-model="currentUser.userBirthday"
            type="date"
            placeholder="选择日期"
            style="width: 80%"
            >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="描述/签名" label-width="150px">
          <el-input
            v-model="currentUser.userDescribe"
            autocomplete="off"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="身份证号码"
          label-width="150px"
          prop="userIdNumber"
        >
          <el-input
            v-model="currentUser.userIdNumber"
            autocomplete="off"
            style="width: 80%"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="请输入充值的金额"
      :visible.sync="dialogFormVisible2"
      width="30%"
      lable-width="100px"
      :close-on-click-modal="false"
    >
          <el-input v-model="money" autocomplete="off" style="width: 80%"></el-input>
        <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="recharge">确 定</el-button>
      </div>
    </el-dialog>
     <!-- 弹窗   -->
    <el-dialog title="信息" :visible.sync="dialogFormVisible3" width="30%" lable-width="100px"
               :close-on-click-modal="false">
      <el-form :model="entity" :rules="addFormRules2" ref="addFormRef">
        <el-form-item label="收货人姓名" label-width="150px"  prop="addressMessageName">
          <el-input v-model="entity.addressMessageName" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="电话" label-width="150px"  prop="addressMessagePhone">
          <el-input v-model="entity.addressMessagePhone" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="省市区/县" prop="address"  label-width="150px">
          <el-cascader :options="cityData" v-model="address"  style="width: 80%"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" label-width="150px"  prop="addressMessageAddress">
          <el-input type="textarea" v-model="entity.addressMessageAddress"  style="width: 80%"></el-input>
          <!-- <el-input v-model="entity.addressMessageAddress" autocomplete="off" style="width: 80%"></el-input> -->
        </el-form-item>
      

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="addAdds">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
var checkmoney = (rule, value, cb) => {
        // 数字或小数的正则表达式
        const regmoney = /^(([^0][0-9]+|0)\.([0-9]{1,2})$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9]{1,2})$)|^(([1-9]+)$)/

        if (regmoney.test(value)) {
          return cb()
        }

        cb(new Error('请输入正确的余额'))
      }
import API from "@/api/request";
import imgUrl from "@/api/url";
const url = "/api/msslyyUser/";
 import cityData from './citydata.js'
let checkEmail = (rule, value, cb) => {
  const regEamil = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
  if (regEamil.test(value)) {
    return cb();
  }
  cb(new Error("请输入合法的邮箱"));
};
let checkMobile = (rule, value, cb) => {
  // 验证手机号的正则表达式
  const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;

  if (regMobile.test(value)) {
    return cb();
  }

  cb(new Error("请输入合法的手机号"));
};
export default {
  name: "BookShopAccount",

  components: {},

  directives: {},

  data() {
    return {
      imgUrl:imgUrl.IMG_URL,
      address:[],
      cityData,
      money:0.0,
      //文件上传列表
      fileList: [],
      //用户弹出框标识
      dialogFormVisible: false,
      dialogFormVisible2:false,
      dialogFormVisible3:false,
      user: {},
      //当前用户对象
      currentUser: {},
      //验证用户表单
      addFormRules: {
        userImages: [{ required: true, message: "头像", trigger: "blur" }],
        userUsername: [{ required: true, message: "名称", trigger: "blur" }],
        userPassword: [
          { required: true, message: "密码", trigger: "blur" },
          {
            min: 5,
            max: 12,
            message: "密码的长度在5到12之间",
            trigger: "blur",
          },
        ],
        userPhone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
        userEmail: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
        userSex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        userIdNumber: [
          { required: true, message: "身份证号码", trigger: "blur" },
          { min: 18, max: 18, message: "身份照号码为18个数", trigger: "blur" },
        ],
      },
       addFormRules2:{
       
        addressMessageName:[
        { required: true, message: '请输入收货人姓名', trigger: 'blur' },
       
       
        ],
        addressMessagePhone:[
        { required: true, message: '请输入电话', trigger: 'blur' },
        { validator: checkMobile, trigger: 'blur' },
       
        ],
        addressMessageAddress:[
        { required: true, message: '请输入详细地址', trigger: 'blur' },
       
        ],
        address:[
        { required: true, message: '请选择省市区/县', trigger: 'blur' },
        ],
        
        
        
      },
      entity:{},
      adds:[],
    };
  },
  filters:{
     dataFomart(date){
       let dt = new Date(date);//实例化时间对象
       let y = dt.getFullYear();
       let m = dt.getMonth() + 1>10?(dt.getMonth()+ 1):"0"+(dt.getMonth()+ 1);
       let d = dt.getDate()>10?dt.getDate():"0"+dt.getDate(); 
      return `${y}-${m}-${d}`
    },},
 

  mounted() {},
  created() {
    this.user = sessionStorage.getItem("user1")
      ? JSON.parse(sessionStorage.getItem("user1"))
      : {};
    this.getUser();
    this.getAdd()
  },
  methods: {
    //提现
    cashOut(){
      const h = this.$createElement;

        this.$notify({
          title: '提现失败',
          message: h('i', { style: 'color: teal'}, '提现失败！！此功能暂未开发')
        });
    },
      editAdds(obj){
          console.log(obj);
        this.entity = JSON.parse(JSON.stringify(obj));
        this.dialogFormVisible3 = true;
      },
      addAdds(){
        this.entity.userId=this.user.id
        if (this.address.length>0) {
          this.entity.addressMessageProvince=this.address[0]
        }
        if (this.address.length>=2) {
          this.entity.addressMessageCity=this.address[1]
        }
        if (this.address.length===3) {
          this.entity.addressMessageDistrict=this.address[2]
        }
        if (!this.entity.id) {
        API.post('/api/msslyyAddressMessaget/', this.entity).then(res => {
           if (res.code === '0') {
             this.$message({
               type: "success",
               message: "操作成功"
             })
           } else {
             this.$message({
               type: "error",
               message: res.msg
             })
           }
         
           this.getAdd()
           this.dialogFormVisible3 = false
        })
      } else {
        API.put('/api/msslyyAddressMessaget/', this.entity).then(res => {
          if (res.code === '0') {
            this.$message({
              type: "success",
              message: "操作成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.getAdd()
          this.dialogFormVisible3 = false
        })
      }
        
       

      },
    showAddDialog(){
        this.entity = {}
        this.dialogFormVisible3 = true
    },
    fileSuccessUpload(res) {
      this.currentUser.userImages =  res.data;
      // this.currentUser.userImages = res.data;
      this.fileList = [res.data];
    },
    edit(obj) {
      this.currentUser = JSON.parse(JSON.stringify(this.currentUser));
      this.fileList = [];
      this.dialogFormVisible = true;
    },
    save() {
      if (!this.currentUser.id) {
        API.post(url, this.currentUser).then((res) => {
          if (res.code === "0") {
            this.$message({
              type: "success",
              message: "操作成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
          this.getUser();
          this.dialogFormVisible = false;
        });
      } else {
         
        API.put(url, this.currentUser).then((res) => {
          if (res.code === "0") {
            this.$message({
              type: "success",
              message: "操作成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
          this.getUser();
          this.dialogFormVisible = false;
        });
      }
    },
    getUser() {
      API.get("/api/msslyyUser/" + this.user.id).then((res) => {
        if (res.code === "0") {
          this.currentUser = res.data;
        }
      });
    },
    //充值
    recharge(){
        this.currentUser.userWallets=this.currentUser.userWallets+(this.money-0)
        API.put(url, this.currentUser).then((res) => {
          if (res.code === "0") {
            this.$message({
              type: "success",
              message: "充值成功",
            });
            //增加消费记录
              let wallet = {};
              wallet.userId = this.user.id;
              wallet.walletChange = this.money;
              API.post(`/api/msslyyWallet`, wallet);
              this.getUser();
              this.money=0
          }
    })
          this.dialogFormVisible2=false
    },
    getAdd(){
        API.get("/api/msslyyAddressMessaget/findListById/" + this.user.id).then((res) => {
        if (res.code === "0") {
          this.adds = res.data;
          console.log(this.adds);
        }
      });
    },
    del(id) {
      API.delete("/api/msslyyAddressMessaget/" + id).then(res => {
        this.$message({
          type: "success",
          message: "操作成功"
        })
        this.getAdd()
      })
    },
  },
};
</script>

<style scoped>
  .el-row{
    display: flex;
 
    flex-flow:row wrap;
  
  }
  .el-row elcol {
    height: 100px;
    width: 200px;
   
   
    flex:1
  }
  .el-table{
    margin-top: 50px;
  }
.price {
  font-weight: bolder;
  font-size: 50px;
}
.el-col {
  margin-top: 20px;
  font-size: 20px;
}
</style>